<template>
<van-popup v-model="showplay" position="top" :style="{ height: '100%' }">
  <div class="shortvideo" style="background-color:#fff">
      <router-view />
<van-nav-bar
  right-text="跳过"
  style="border:none"
  @click-right="showplay=false"
/>
<span style="font-size: 25px">选择你感兴趣的内容</span>
<p style="font-size: 15px; margin-top:2px">让我们更懂你</p>
<van-checkbox-group v-model="result" :max="3">
<van-grid :border="false" :column-num="3">
  <van-grid-item class="checkbox" v-for="item in videotitle" :key="item.id">
    <van-image width="2rem"
  height="2rem" :src="item.image" round/>
  <van-checkbox icon-size='25px' checked-color="#ff9800" class="checkboxitem" :name="item" />
  <span style="font-size:10px">{{item.name}}</span>
  </van-grid-item>
</van-grid>
</van-checkbox-group>
<van-button round size="normal" color="#ff9800" class="btnsize" @click="stratplay">开始看视频</van-button>
<van-notice-bar
  left-icon="volume-o"
  text="最多只能选三个"
  scrollable
/>
  </div>
  </van-popup>
</template>

<script>
import { getshortplay } from '@/api/ying/shortvideo'
export default {
    data () {
        return {
            result: [],
            videotitle: [],
            showplay: true
        }
    },
    components: {

    },
    created () {
        this.getshortplay()
    },
    mounted () {

    },
    methods: {
        async  getshortplay() {
            const { data } = await getshortplay()
            this.videotitle = data.shortvideo
        },
        stratplay() {
            this.$parent.getplaylist(this.result)
            this.showplay = false
        }
    }
}
</script>

<style scoped lang="scss">
    .shortvideo{
    background-color: #ffffff;
    height: 100%;
    /deep/ .van-nav-bar{
        width: 100%;
        height: 50px;
        margin: 0;
       /deep/ .van-hairline::after {
    border: 0 solid #fff;
}
    }
    .van-image{
        margin-bottom: 20px;
    }
    .checkbox{
        position: relative;
        top: 0;
        left: 0;
        .checkboxitem{
        position: absolute;
        bottom: 70px;
        right: 20px;
        border-radius: 50%;
        border: 3px solid #ffffff;
        background-color: #929292;
        }
    }
    .btnsize {
        width: 5rem;
        height: 0.7rem;
        font-size: 0.3rem;
        font-weight: bold;
        margin-bottom: 100px ;
    }
}
</style>
